<template>
	<view :style="{ '--com_color': parameter.inctiveColor || '#787878',
		'--color': parameter.fColor || vuex_config.themeColor1,
		'--f_size': (parameter.fSize || 15) * 2 + 'rpx',
		'--act_size': (parameter.actSize || 16) * 2 + 'rpx', }">

		<view class="tab_main" v-if="parameter.layout == 1 || !parameter.layout">
			<scroll-view scroll-x class="tab_box">
				<view class="tab_item" v-for="(item, index) in dataList" :key="index" @click="changeTab(item, index)">
					<view class="title" :class="[currentIndex == index ? 'active' : '']">{{ item.title }}</view>
				</view>
			</scroll-view>

		</view>
		<view class="cen_tab tab_main" v-else-if="parameter.layout == 2">
			<view :class="['tab_box',parameter.isCenter?'is_center':'no_center']">
				<view class="tab_item" v-for="(item, index) in dataList" :key="index" @click="changeTab(item, index)">
					<view class="title" :class="[currentIndex == index ? 'active' : '']">{{ item.title }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			able: {
				type: Boolean,
				default: true,
			}, // 能否切换
			parameter: {
				type: Object,
				default: () => {
					return {}
				},
			},
			dataList: {
				type: Array,
				default: () => {
					return []
				},
			},
		},
		data() {
			return {
				currentIndex: 0
			};
		},
		methods: {
			changeTab(item, index) {
				if (this.currentIndex !== index) {
					this.$emit('changeTab', {
						index: index,
						item: item,
						currentIndex: this.currentIndex
					})
					if (this.able) {
						this.currentIndex = index;
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tab_main {
		padding: 0 30rpx 4rpx;
	}

	.tab_box {
		white-space: nowrap;
		z-index: 10;

		.tab_item {
			display: inline-block;
			margin-right: 28rpx;
			color: var(--com_color);

			&:last-of-type {
				margin-right: 0;
			}

			.title {
				text-align: center;
				font-weight: 500;
				font-size: var(--f_size);
				position: relative;
				color: inherit;
				padding: 10rpx 0 14rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;

				&::before {
					content: '';
					width: 0;
					height: 6rpx;
					border-radius: 2rpx;
					background-color: var(--color);
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translate(-50%, 0);
					transition: width 0.3s;
				}

				&.active {
					font-size: var(--act_size);
					color: var(--color);
					font-weight: bold;

					&::before {
						width: 85%;
					}
				}
			}
		}
	}

	.cen_tab.tab_main {
		padding: 0 0 8rpx;

		.tab_box {
			display: flex;
			align-items: center;

			&.is_center {
				justify-content: center;

				.tab_item {
					padding: 0 30rpx;
				}
			}

			&.no_center {
				.tab_item {
					flex: 1;
					overflow: hidden;

					.title {
						width: auto;
						max-width: 100%;
					}
				}
			}

			.tab_item {
				margin-right: 0;
				display: flex;
				justify-content: center;
			}
		}
	}
</style>
